import React, { Component } from "react";
import { Form, Input, Select, Switch, Button, message } from "antd";
import { messages } from "share/common";
import interfaceService from "containers/financial-account/interface-definition/interface-service";

const { Item } = Form;
const { TextArea } = Input;
const { Option } = Select;

@Form.create()
class AccountSceneDefinitionContent extends Component {
  state = {
    saveLoading: false,
  };

  formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, value) => {
      if (!err) {
        const {
          close,
          params: { record },
        } = this.props;
        this.setState({ saveLoading: true });
        interfaceService
          .copyScene({
            ...record,
            ...value,
            isDefault: value.isDefault === "true",
          })
          .then(() => {
            close(true);
            message.success(messages("common.operate.success") /*操作成功*/);
            this.setState({ saveLoading: false });
          })
          .catch((e) => {
            this.setState({ saveLoading: false });
            message.error(e.response.data.message);
          });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { saveLoading } = this.state;
    const { close } = this.props;
    const { record } = this.props.params;
    return (
      <div>
        <Form className="new-form">
          <Item label={messages("common.column.status") /*状态*/} {...this.formItemLayout}>
            {getFieldDecorator("isEnable", {
              rules: [{ required: true }],
              valuePropName: "checked",
              initialValue: true,
            })(<Switch />)}
          </Item>
          <Item label={messages("finance-2.key69") /*场景编码*/} {...this.formItemLayout}>
            {getFieldDecorator("sceneCode", {
              rules: [
                {
                  required: true,
                  message: messages("common.please.input") /*请输入*/,
                },
              ],
            })(<Input placeholder={messages("common.please.input") /*请输入*/} />)}
          </Item>
          <Item label={messages("finance-2.key70") /*场景名称*/} {...this.formItemLayout}>
            {getFieldDecorator("sceneName", {
              rules: [
                {
                  required: true,
                  message: messages("common.please.input") /*请输入*/,
                },
              ],
            })(<Input placeholder={messages("common.please.input") /*请输入*/} />)}
          </Item>
          <Item label={messages("finance-2.key129") /*场景说明*/} {...this.formItemLayout}>
            {getFieldDecorator("comment")(
              <TextArea placeholder={messages("common.please.input") /*请输入*/} rows={4} style={{ resize: "none" }} />
            )}
          </Item>
          <Item label={messages("finance-2.key57") /*是否预置*/} {...this.formItemLayout}>
            {getFieldDecorator("isDefault", {
              rules: [
                {
                  required: true,
                  message: messages("common.please.select") /*请选择*/,
                },
              ],
              initialValue: record.isDefault ? String(record.isDefault) : "false",
            })(
              <Select disabled>
                <Option key={"true"}>{messages("common.yes") /*是*/}</Option>
                <Option key={"false"}>{messages("common.no") /*否*/}</Option>
              </Select>
            )}
          </Item>
          <div className="slide-footer">
            <Button type="primary" onClick={this.handleSave} loading={saveLoading}>
              {messages("common.ok") /*确定*/}
            </Button>
            <Button onClick={() => close()}>{messages("common.cancel") /*取消*/}</Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default AccountSceneDefinitionContent;
